<!DOCTYPE html>
<html lang="en" xmlns:th="http://thyneleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div th:replace="/common/header"></div>
<div id="Content">
    <div id="BackLink">
        <a href="/cart/ViewCart">Return to Shopping Cart</a> </div>
    <div id="Catalog">
        <style type="text/css">

            table {
                width: 700px;
                padding: 0;
                margin: 0;
            }

            caption {
                padding: 0 0 5px 0;
                width: 700px;
                font: italic 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
                text-align: right;
            }

            th {
                font: bold 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
                color: #4f6b72;
                border-right: 1px solid #C1DAD7;
                border-bottom: 1px solid #C1DAD7;
                border-top: 1px solid #C1DAD7;
                letter-spacing: 2px;
                text-transform: uppercase;
                text-align: left;
                padding: 6px 6px 6px 12px;
                background: #d5eaca no-repeat;
            }

            td {
                border-right: 1px solid #C1DAD7;
                border-bottom: 1px solid #C1DAD7;
                background: #fff;
                font-size:16px;
                padding: 6px 6px 6px 12px;
                color: #4f6b72;
            }

        </style>

        <table>
            <tr>
                <td>
                    <h2>Checkout Summary</h2>
                    <table>
                        <tr>
                            <td><b>Item ID</b></td>
                            <td><b>Product ID</b></td>
                            <td><b>Description</b></td>
                            <td><b>In Stock?</b></td>
                            <td><b>Quantity</b></td>
                            <td><b>List Price</b></td>
                            <td><b>Total Cost</b></td>
                        </tr>
                        <c:forEach var="cartItem" items="${sessionScope.cart.cartItems}">
                            <tr>
                                <td>
                                    <a href="ViewItem"  name="itemId" value="${cartItem.item.itemId}">${cartItem.item.itemId}</a>
                                </td>
                                <td>${cartItem.item.product.productId}</td>
                                <td>${cartItem.item.attribute1} ${cartItem.item.attribute2}
                                    ${cartItem.item.attribute3} ${cartItem.item.attribute4}
                                    ${cartItem.item.attribute5} ${cartItem.item.product.name}</td>
                                <td>${cartItem.inStock}</td>
                                <td>${cartItem.quantity}</td>
                                <td><fmt:formatNumber value="${cartItem.item.listPrice}"
                                                      pattern="$#,##0.00" /></td>
                                <td><fmt:formatNumber value="${cartItem.total}"
                                                      pattern="$#,##0.00" /></td>
                            </tr>
                        </c:forEach>
                        <tr>
                            <td colspan="7">Sub Total: <fmt:formatNumber
                                    value="${sessionScope.cart.subTotal}" pattern="$#,##0.00" /></td>
                        </tr>
                    </table>

                <td>&nbsp;</td>

            </tr>
        </table>

    </div>
</div>
<div th:replace="/common/footer"></div>
</body>
</html>